<template>
    <div>
        <div class="sidebar-top">
            <div >EMS能量管理</div>
            <div>退出</div>
        </div>
        <div class="sidebar-cont">
            <el-radio-group v-model="isCollapse" style="margin-bottom: 20px">
                <el-radio-button :value="false">expand</el-radio-button>
                <el-radio-button :value="true">collapse</el-radio-button>
              </el-radio-group>
              <el-menu
                  router="true"
                  default-active="2"
                  class="el-menu-vertical-demo"
                  :collapse="isCollapse"
                  @open="handleOpen"
                  @close="handleClose"
                >
                <menuexpend :menulist="menuArr"></menuexpend>
              </el-menu>
        </div>
        <div class="content">
           <RouterView></RouterView>
        </div>
    </div>
   
</template>


<script lang="ts" setup >

import { ref,onMounted} from 'vue'
import router from "@/router"
import mqtt from "mqtt";
import menuexpend from '@/components/menuexpend.vue'
import usePcsStore from '@/store/storer.ts'
    const devData = usePcsStore()
    console.log(devData);

onMounted(() => {
  // 建立连接
  // 注意此出的网址开头要使用ws:而不是tcp:
  let client = mqtt.connect("ws://127.0.0.1:8883/mqtt", {
    username: "root",  // 用户名字
    password: "root",  // 密码
  });
  // 订阅主题
  client.subscribe("/dev/report/colloc/data", (topic) => {
    console.log(topic);  // 此处打印出订阅的主题名称
  });
  
  // 推送消息
  client.publish("test2", JSON.stringify({one: '1', two: '2'})); 

  //接受消息
  client.on("message", (topic, data) => {
    // 这里有可能拿到的数据格式是Uint8Array格式，所以可以直接用toString转成字符串
    const datastring = data.toString()
    const  datajs = JSON.parse(datastring)
    // console.log(datajs.dev_name,datajs.para_type,datajs.data);
    devData.upGradeDev(datajs)

    // if (datajs.para_type == 'yx'){
    //   devData.pcsyxset(datajs.data)
    // }else if(datajs.para_type == "yk"){
    //   devData.pcsykset(datajs.data)
    // }else if(datajs.para_type == "yc"){
    //   devData.pcsycset(datajs.data)
    // }
    // else if(datajs.para_type == "yt"){
    //   devData.pcsytset(datajs.data)
    // }
  });

  // 重连
  client.on("reconnect", (error) => {
    console.log("正在重连:", error);
  });

  // 错误回调
  client.on("error", (error) => {
    console.log("MQTT连接已关闭");
  });
});
const isCollapse = ref(false)
const handleOpen = (key: string, keyPath: string[]) => {
  // if( keyPath[1] != null) {
  //   router.push(keyPath[1])
  // }
}
const handleClose = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}
let menuArr=[
    {
      name: "设备管理",
      path: "/topic", 
      icon: "Management",
      children: [
        {
          name: "Pcs1",
          path: "/topic/pcs",
          icon: "List",
          children: [
            {
                name: "pcs",
                path: "/topic/pcs",
                icon: "List",
                children: [],
            },
          ],
       },
       {
          name: "BMS",
          path: "/topic/bms",
          icon: "List",
          children: [
            {
                name: "bms1",
                path: "/topic/bms",
                icon: "List",
                children: [],
            },
          ],
       },
       {
          name: "电表信息",
          path: "电表信息",
          icon: "List",
          children: [
            {
            name: "电网电表",
            path: "电网电表",
            icon: "List",
            children: [],
            },
            {
            name: "储能电表",
            path: "储能电表",
            icon: "List",
            children: [],
            },
          ],
       },
       {
          name: "制冷信息",
          path: "制冷信息",
          icon: "List",
          children: [
            {
            name: "空调1",
            path: "空调1",
            icon: "List",
            children: [],
            },
            {
            name: "液冷机",
            path: "液冷机",
            icon: "List",
            children: [],
            },
          ],
       }
    ],
    },{ 
      name: "策略管理",
      path: "/topic/manual", 
      icon: "Management",
      children: [
            {
            name: "manual",
            path: "/topic/manual",
            icon: "List",
            children: [],
            },
            {
            name: "auto",
            path: "/topic/auto",
            icon: "List",
            children: [],
            },
            {
            name: "proxy",
            path: "/topic/proxy",
            icon: "List",
            children: [],
            },
      ]
    },
    {       
        name: "告警管理",
        path: "告警管理",
        icon: "List",
        children: [
            {
            name: "当前告警信息",
            path: "当前告警信息",
            icon: "List",
            children: [],
            },
            {
            name: "历史告警",
            path: "历史告警",
            icon: "List",
            children: [],
            },
        ],        
    },
    {       
        name: "收益管理",
        path: "收益管理",
        icon: "List",
        children: [
            {
            name: "收益模版",
            path: "收益模版",
            icon: "List",
            children: [],
            },
            {
            name: "收益计算配置",
            path: "收益计算配置",
            icon: "List",
            children: [],
            },
            {
            name: "收益统计报表",
            path: "收益统计报表",
            icon: "List",
            children: [],
            },
        ],        
    },
    {
        
            name: "日志管理",
            path: "日志管理",
            icon: "List",
            children: [
                {
                    name: "系统日志",
                    path: "系统日志",
                    icon: "List",
                    children: [],
                },
                {
                    name: "操作日志",
                    path: "操作日志",
                    icon: "List",
                    children: [],
                }
            ],
            
    },
    {
        
        name: "用户管理",
        path: "用户管理",
        icon: "List",
        children: [
            {
                name: "创建用户",
                path: "创建用户",
                icon: "List",
                children: [],
            },
            {
                name: "删除用户",
                path: "删除用户",
                icon: "List",
                children: [],
            },
            {
                name: "用户修改与现实",
                path: "用户修改与现实",
                icon: "List",
                children: [],
            },
        ],
        
}
  ]
</script>

<style>
.sidebar-top div:nth-child(1){
    padding-left: 22px;
    font-size: 18px;
}

.sidebar-top div:nth-child(2){
    padding-right: 22px;
    cursor: pointer;
}

.sidebar-top{
    width: 100%;
    background: #ffffff;
    height: 50px;
    color: #333333;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 50;
}
.sidebar-cont{
    position: fixed;
    top:50px;
    left: 0;
    bottom: 50px;
    background:#ffffff;
    width: 200px;
    height: 90vh;
    color: #000000;
    font-size: 16px;
    overflow-y:auto;   
}
.content{
    position: fixed;
    top:50px;
    left: 200px;
    bottom: 50px;
    background:#ffffff;
    width: 80%;
    height: 90%;
    color: #000000;
    font-size: 16px;
    overflow-y:auto; 
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px;
    min-height: 400px;
  }

</style>